<template>
  <div class="ccui-tree-table ccui-problem-edit-dic">
    <div class="ccui-navigation">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        class="ccui-crumbs-back"
        @click="crumbsBack"
        >返回</el-button
      >
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        class="ccui-navigation-crumbs-container"
      >
        <el-breadcrumb-item :to="{ path: '/' }">{{
          $store.state.user.userDetal.agentName
        }}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/helpAndSupport/helpCenter' }"
          >帮助文档</el-breadcrumb-item
        >
        <el-breadcrumb-item>
          <span class="el-curr-crumb ccui-breadcrumb-name_span">常见问题</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="ccui-tree-table">
      <div class="ccui-tree-wrapper">
        <div class="ccui-dic-box">
          <span class="ccui-dic-left">常见问题</span>
        </div>
        <div class="ccui-tree">
          <el-tree
            v-if="showTree"
            style="width: 220px; margin-left: 20px;"
            class="ccui-parent-tree ccui-flow-tree"
            ref="tree"
            :load="loadNode"
            :props="treeProps"
            node-key="faqClassifyId"
            :check-strictly="true"
            lazy
            highlight-current
            :default-expanded-keys="expendedIdArr"
            :draggable="draggable"
            @node-expand="nodeExpand"
            @node-collapse="nodeCollapse"
            @node-click="nodeClickHandler"
          >
            <span
              :class="{
                'ccui-custom-tree-node': true,
                'ccui-level-one': node.level == 1,
                'ccui-level-two': node.level == 2,
                isShowBtn: isShowBtn
              }"
              slot-scope="{ node }"
            >
              <span :title="node.label">
                {{ node.label }}
              </span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="ccui-app-container">
        <div
          class="ccui-advanced-search-wrapper ccui-clearfix"
          v-if="!isShowDetail"
        >
          <div class="ccui-search-wrapper">
            <div class="ccui-tab-wrapper">
              <el-button type="table-top-active" size="mini">全部</el-button>
            </div>
          </div>
          <div class="ccui-dic-content">
            <ul>
              <li
                class="ccui-detail-title"
                v-for="(item, index) in dicArr"
                :key="index"
                @click="showDetail(item.faqId)"
              >
                <span class="ccui-doct">.</span>
                <span :title="item.faqName">{{ item.faqName }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div
          class="ccui-advanced-search-wrapper ccui-clearfix"
          v-if="isShowDetail"
        >
          <div class="ccui-dic-view">
            <div class="ccui-title-box">
              <span class="ccui-content-title" :title="faqProblemBO.faqName">
                {{ faqProblemBO.faqName }}
              </span>
            </div>
            <div class="ccui-little-title">
              <span>发布时间 {{ faqProblemBO.publishTime }}</span>
              <span>阅读量 {{ faqProblemBO.readingCnt }}</span>
              <span>责任编辑 {{ faqProblemBO.publishUser }}</span>
            </div>
            <div
              class="ccui-content-detail"
              v-html="faqProblemBO.textContent"
            ></div>
          </div>
        </div>
        <div class="ccui-content-text" v-if="dicArr.length == 0">
          <img
            src="@/basa/assets/images/content_null.png"
            class="ccui-content-null-image"
            alt
          />
          <p class="ccui-content-null-text">暂无相关常见问题</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  queryFaqClassifyTree,
  queryFaqProblemList,
  queryFaqProblemById
} from "../../api/question";
export default {
  name: "problem-edit-dic",
  data() {
    return {
      // 树布局
      treePosition: "absolute",
      treeMinHeight: "",
      minHeight: "0",
      treeTop: "0",
      draggable: false,
      showTree: true,
      // input 数据
      // 树数据
      dicArr: [],
      expendedIdArr: [],
      id: "",
      treeProps: {
        label: "title",
        isLeaf: "isLeafNode",
        children: "treeList"
      },
      titleCode: "",
      parentTitleCode: "",
      parentTitle: "",
      isShowBtn: false,
      isShowDetail: false,
      level: 0,
      levelNode: 0, //单击的节点级别
      faqClassifyName: "",
      faqClassifyId: "",
      first: 0,
      faqProblemBO: {},
      treeNode: {},
      treeData: {},
      isNewDisabled: false,
      resolve: "",
      appUId: process.env.VUE_APP_ID,
      appName: "",
      isShowPageLoading: false
    };
  },
  watch: {},
  created() {},
  mounted() {
    //滚动条滑动，先不要删除防止在改需求
    //window.addEventListener("scroll", this.windowScroll);
    this.expendedIdArr.push(this.firstfaqClassifyId);
  },
  methods: {
    crumbsBack() {
      this.$router.push("/helpAndSupport");
    },
    showDetail(faqId) {
      this.isShowDetail = true;
      this.queryFaqProblemById(faqId);
    },
    // 详情接口服务
    queryFaqProblemById(faqId) {
      queryFaqProblemById({
        faqId: faqId,
        isShowPageLoading: true
      }).then(res => {
        window._paq.push(["trackEvent", "document", "click", "faqId", faqId]);
        this.faqClassifyName = res.data.data.faqClassifyName;
        this.faqProblemBO = res.data.data.faqProblemBO;
        this.faqId = res.data.data.faqProblemBO.faqId;
      });
    },
    //节点单击
    nodeClickHandler(obj, node) {
      this.levelNode = node.level;
      this.faqClassifyName = "";
      this.faqProblemBO.textContent = "";
      if (node.data.level > 1) {
        this.isNewDisabled = false;
      } else {
        this.isNewDisabled = true;
      }
      this.faqClassifyId = node.data.faqClassifyId;
      this.treeNode = node;
      this.treeData = obj;
      this.parentTitleCode = node.data.parentTitleCode;
      this.isShowDetail = false;
      if (node.level == 1) {
        this.$refs.tree.setCurrentKey(this.faqClassifyIdNew);
      }
      if (node.level == 2) {
        this.faqClassifyIdNew = node.data.faqClassifyId;
        this.queryFaqProblemList(obj.faqClassifyId);
      }
    },
    nodeExpand(obj, node, el) {
      this.expendedIdArr.push(obj.faqClassifyId);
    },
    nodeCollapse(obj, node, el) {
      const index = this.expendedIdArr.findIndex(
        value => value == obj.faqClassifyId
      );
      this.expendedIdArr.splice(index, 1);
    },
    // 左树接口
    queryFaqClassifyTree() {
      const obj = {
        appUId: this.appUId,
        titleCode: this.titleCode || ""
      };
      return queryFaqClassifyTree(obj);
    },
    loadNode(node, resolve) {
      this.level = node.level;
      this.resolve = resolve;
      if (node.level < 1) {
        this.isNewDisabled = true;
        this.queryFaqClassifyTree().then(res => {
          if (res.data.code == "0") {
            if (res.data.data.treeList.length < 1) {
              this.btnTxt = "新建";
              this.isNewDisabled = true;
            } else {
              this.btnTxt = "编辑";
            }
            if (res.data.data.treeList.length > 0) {
              if (this.first == 0) {
                //只有第一次加载数时默认展开第一个节点，以后修改根节点时，已经展开哪些仍然展开哪些，所以不再走此代码
                this.expendedIdArr = [];
                this.expendedIdArr.push(
                  res.data.data.treeList[0].faqClassifyId
                );
              }
              this.first = 1;
              this.$refs.tree.setCurrentKey(
                res.data.data.treeList[0].faqClassifyId
              );
            }
            resolve(res.data.data.treeList);
          }
        });
      }
      if (node.level >= 1) {
        const param = {
          appUId: this.appUId,
          titleCode: node.data.titleCode
        };
        queryFaqClassifyTree(param).then(res => {
          this.$nextTick(() => {
            if (res.data.data.treeList.length > 0) {
              this.isNewDisabled = false;
              this.$refs.tree.setCurrentKey(
                res.data.data.treeList[0].faqClassifyId
              );
              this.faqClassifyIdNew = res.data.data.treeList[0].faqClassifyId;
              this.queryFaqProblemList(res.data.data.treeList[0].faqClassifyId);
            }
          });
          resolve(res.data.data.treeList);
        });
      }
    },
    //右边问题接口
    queryFaqProblemList(id) {
      if (this.levelNode == 2) {
        this.isShowPageLoading = true;
      } else {
        this.isShowPageLoading = false;
      }
      const obj = {
        faqClassifyId: id,
        isShowPageLoading: this.isShowPageLoading
      };
      queryFaqProblemList(obj).then(res => {
        if (res.data.code === "0") {
          if (res.data.data.faqProblemBOs.length > 0) {
            this.dicArr = res.data.data.faqProblemBOs;
          } else {
            this.dicArr = [];
          }
        }
      });
    }
    //滚动条滑动，先不要删除防止在改需求
    // windowScroll() {
    //   let scrollTop =
    //     window.pageYOffset ||
    //     document.documentElement.scrollTop ||
    //     document.body.scrollTop;
    //   this.treePosition = scrollTop >= 120 ? "fixed" : "absolute";
    //   this.treeTop = scrollTop >= 120 ? "20px" : "0";
    // }
  }
};
</script>
